<template>
  <view>
    <view class="tip-text">效果预览</view>
    <u-list height="60vh">
      <FormRender @handleTargetChange="handleTargetChange" ref="FRD"></FormRender>
    </u-list>
    <view class="edit-wrap">
      <view style="display: flex; align-items: center">
        <view style="width: 70%; color: #398ade">属性设置 </view>
        <u-button @click="submitSchema" text="保存提交" icon="checkmark-circle" :customStyle="btnStyle" type="primary" size="small"> </u-button>
      </view>
      <u--form labelPosition="left" :model="model" ref="uForm">
        <template v-for="comp in propList">
          <!-- 文本输入 -->
          <u-form-item v-if="comp.type == 'textInput'" labelWidth="80" :label="comp.label" borderBottom :ref="'c' + comp.id">
            <u--input @input="(e) => (model[comp.prop] = e)" :value="model[comp.prop]" border="none" :placeholder="comp.placeholder"></u--input>
          </u-form-item>
        </template>
      </u--form>
    </view>
  </view>
</template>
<script>
import { propMap } from './propMap'
export default {
  name: 'DesignForm',
  data() {
    return {
      btnStyle: {
        width: '86px',
      },
      cStyle: {
        width: '80%',
      },
      propList: [],
      formid: '',
      model: null,
    }
  },
  onLoad(opt) {
    // console.log('showform opt', opt)
    this.formid = opt.id
  },
  mounted() {
    this.getData()
  },
  methods: {
    async submitSchema() {
      const sc = this.$refs.FRD.getSchema()
      console.log('submitSchema', sc)
      const { formid, label, title } = sc
      const _script = `update formlist set [schema]='${JSON.stringify(sc)}' where id = '${formid}';`
      console.log('call submitSchema', _script)
      const r = await uni.$u.http.post(`/weixinNotify/AutoForm/AddItem`, { script: _script })
      this.$alert(r)
    },
    handleTargetChange(type, data) {
      this.model = data
      this.propList = propMap[type]
      // console.log(this.editModel, this.propList)
    },
    submit() {
      this.$refs.FRD.getData()
    },
    async getData() {
      const script = `select * from formlist where id ='${this.formid}'`
      const res = await uni.$u.http.post(`/weixinNotify/AutoForm/GetFormList`, { script })
      const schema = JSON.parse(res[0].schema)
      // console.log('showform getData', JSON.parse(res[0].schema))
      this.$refs.FRD.load({ schema, isDesign: true })
    },
  },
}
</script>
<style>
.floot-btn {
  position: fixed;
  bottom: 25px;
  left: 0;
  width: 100%;
}
.tip-text {
  position: fixed;
  right: 12px;
  top: 12px;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 4px;
  font-size: 14px;
  color: #fff;
}

.edit-wrap {
  box-sizing: border-box;
  padding: 12px 12px 0 12px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 2px -2px 12px 0 rgba(0, 0, 0, 0.2);
  height: 40vh;
  background: #fff;
  width: 100%;
}
</style>
